/* eslint-disable func-names */
/* eslint-disable no-console */
import React from 'react';
import {
  Button,
  Form,
  Input,
  Row,
  Col,
  Select,
  DatePicker,
  Upload,
  message,
  Table,
} from 'antd';
import type { UploadProps } from 'antd';
import { useModel } from 'umi';
import Styles from './index.less';

const { TextArea } = Input;


const data: any[] = [];
// eslint-disable-next-line no-plusplus
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

const columns1: any = [
  {
    title: '费用发生月份',
    dataIndex: 'taskId',
    align: 'center',
    width: 100,
  },
  {
    title: '费用发生日期',
    dataIndex: 'taskType',
    align: 'center',
    width: 100,
    render: (text: any) => <span>{text || '--'}</span>,
  },
  {
    title: '主体id',
    dataIndex: 'taskName',
    align: 'center',
    width: 100,
  },
  {
    title: '主体',
    dataIndex: 'queryCondition',
    align: 'center',
    width: 100,
  },
  {
    title: '公司ID',
    dataIndex: 'username',
    align: 'center',
    width: 100,
  },
  {
    title: '公司名称',
    dataIndex: 'phone',
    align: 'center',
    width: 100,
  },
  {
    title: '城市',
    dataIndex: 'creatDate',
    align: 'center',
    width: 100,
  },
  {
    title: '一级去的类型',
    dataIndex: 'finishTime',
    align: 'center',
    width: 100,
  },
  {
    title: '二级渠道类型',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
    // render: (text:string) => taskStatusEnum[text]
  },
  {
    title: '渠道id',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
    // render: (text:string) => taskStatusEnum[text]
  },
  {
    title: '渠道code码',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
    // render: (text:string) => taskStatusEnum[text]
  },
  {
    title: '渠道名称',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
    // render: (text:string) => taskStatusEnum[text]
  },
  {
    title: '类型',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
    // render: (text:string) => taskStatusEnum[text]
  },
  {
    title: '阶梯',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
    // render: (text:string) => taskStatusEnum[text]
  },
  {
    title: '单期拉新费',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
    // render: (text:string) => taskStatusEnum[text]
  },
  {
    title: '订单拉新总费用',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
    // render: (text:string) => taskStatusEnum[text]
  },
  {
    title: '税率',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
    // render: (text:string) => taskStatusEnum[text]
  },
  {
    title: '订单拉新不含税总费用',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '订单号',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '是否有效拉新',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '司机是否有人证',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '月租金',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '租期',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '订单总租金',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '租赁类型',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '订单类型',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '车架号',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '车辆品类',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '能源类型',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '车型',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '车龄',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '星级',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '下单时间',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '订单提车时间',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '状态',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '结算时间',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
];

const columns2: any[] = [
  {
    title: '渠道奖励ID',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '月份',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '日期',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '主体',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '公司',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '城市',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '渠道一级类型',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '渠道二级类型',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '渠道id',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '渠道名称',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '类型',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '补费总金额',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '补费拉新量',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '补费总期数',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '单期拉新费',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '补费理由',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '审核状态',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '审核时间',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '申请人',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '申请提交时间',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '备注',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 100,
  },
  {
    title: '操作',
    dataIndex: 'taskStatus',
    align: 'center',
    width: 200,
    fixed: 'right',
    render: () => (
      <div style={{ display: 'flex' }}>
        <Button type="link">详情</Button>
        <Button type="link">编辑</Button>
        <Button type="link">删除</Button>
      </div>
    ),
  },
];



export default function () {
  const { initialState } = useModel('@@initialState');
  const { fileName } = initialState || {};
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const uploadProps: UploadProps = {
    name: fileName,
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

  return (
    <div className={Styles.editor}>
      <Form
        name="basic"
        labelCol={{ flex: '120px' }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        style={{ width: '1400px', margin: '0 auto' }}
      >
        <h3>基础信息</h3>
        <Row>
          <Col span={8}>
            <Form.Item
              label="结算单号"
              name="q"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="渠道名称"
              name="w"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="渠道类型"
              name="e"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <Form.Item
              label="主体"
              name="r"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="城市"
              name="t"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Select>
                <Select.Option value="demo">Demo</Select.Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={8}>
            <></>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <Form.Item
              label="结算时间"
              name="y"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <DatePicker />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="创建时间"
              name="u"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <DatePicker />
            </Form.Item>
          </Col>
          <Col span={8}>
            <></>
          </Col>
        </Row>

        <Row>
          <Form.Item
            // style={{ width: '29%' }}
            label="描述"
            name="i"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <TextArea
              style={{ width: '1370px' }}
              placeholder="Controlled autosize"
              autoSize={{ minRows: 3, maxRows: 5 }}
            />
          </Form.Item>
        </Row>

        <h3>结算信息</h3>

        <Row>
          <Col span={8}>
            <Form.Item
              label="预计结算总金额"
              name="o"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="实际结算总金额"
              name="p"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={8}>
            <></>
          </Col>
        </Row>

        <Row>
          <Form.Item
            label="附件上传"
            name="a"
            rules={[{ required: true, message: 'Please input your username!' }]}
            extra={
              <div>
                <p>附件说明：附件最大支持50M，</p>
                <p>支持格式：PDF、Word、Excel、JPG、PNG、ZIP、RAR</p>
              </div>
            }
          >
            <Upload {...uploadProps}>
              <Button type="link">Click to Upload</Button>
            </Upload>
          </Form.Item>
        </Row>

        <Row>
          <Col span={12}>
            <h3>费用明细信息</h3>
          </Col>
          <Col span={12} style={{ textAlign: 'right' }}>
            <Button type="link">导出</Button>
          </Col>
        </Row>

        <Table scroll={{ x: 4000 }} columns={columns1} dataSource={data} />

        <Row>
          <Col span={20}>
            <h3>补扣费</h3>
          </Col>
          <Col span={4}>
            <Row>
              <Button type="link">新增</Button>
              <Button type="link">导入</Button>
              <Button type="link">导出</Button>
            </Row>
          </Col>
        </Row>

        <Table scroll={{ x: 2000 }} columns={columns2} dataSource={data} />

        <Form.Item>
          <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
            <Button type="primary">提交审核</Button>
            <Button>返回</Button>
          </div>
        </Form.Item>
      </Form>
    </div>
  );
}
